<div class="auto-div">
  <div
    echarts
    *ngIf="$any(echartsOption.dataset).source.length > 0"
    [options]="echartsOption"
    class="echarts-div"
  ></div>
  <table [formGroup]="userInput">
    <tr>
      <td class="left">
        <div class="higher-div">
          <span [innerText]="'AUTO.AUTO_PROGRESS' | translate"></span>
        </div>
      </td>
      <td class="right">
        <div class="one-line-div">
          <br />
          <mat-slider
            class="field-part-1"
            color="primary"
            [thumbLabel]="true"
            [formControl]="currentPoint"
            (change)="onChangeCurrentPointSlider()"
            [displayWith]="displayWith"
            [max]="maxValidArray[effectNum - 1]"
            [min]="minValid"
            [step]="step"
            tickInterval="auto"
          >
          </mat-slider>
          <mat-form-field appearance="legacy" class="field-part-2">
            <input
              type="number"
              matInput
              title=""
              [max]="maxValidArray[effectNum - 1]/10"
              [min]="minValid"
              step="0.1"
              [formControl]="currentPointInput"
              (change)="onChangeCurrentPointInput()"
            />
          </mat-form-field>
        </div>
      </td>
    </tr>
    <ng-container *ngFor="let item of inputItems">
      <tr
        *ngIf="!userInputHiddenStatus.get(item.model) && (item.isSelect?(userInputList[item.selectListName!].length > 0):true)"
      >
        <td class="left">
          <span [innerText]="'AUTO.' + item.name | translate"></span>
        </td>
        <td class="right">
          <mat-form-field
            appearance="legacy"
            floatLabel="always"
            *ngIf="item.isInput"
            class="normal-field"
          >
            <mat-label [innerText]="'AUTO.' + item.title | translate"></mat-label>
            <input
              matInput
              type="number"
              step="0.01"
              [formControlName]="item.model"
              (ngModelChange)="item.onChange($event)"
            />
            <span matSuffix>%&nbsp;</span>
          </mat-form-field>
          <mat-form-field
            appearance="legacy"
            floatLabel="always"
            *ngIf="item.isSelect"
            class="normal-field"
          >
            <mat-label [innerText]="'AUTO.' + item.title | translate"></mat-label>
            <mat-select
              [formControlName]="item.model"
              (ngModelChange)="item.onChange($event)"
              (openedChange)="item.onSelectOpenedChanged?item.onSelectOpenedChanged($event):';'"
            >
              <mat-option *ngIf="item.hasEmpty" value=""></mat-option>
              <ng-container *ngFor="let option of userInputList[item.selectListName!]">
                <ng-container [ngSwitch]="item.useNameMap">
                  <mat-option
                    *ngSwitchCase="'custom'"
                    [value]="option"
                    [innerText]="item.optionTranslationTag + item.optionNameMap![$any(option)] | translate"
                  ></mat-option>
                  <mat-option
                    *ngSwitchCase="'none'"
                    [value]="item.isSelectObjectList?$any(option).value:option"
                    [innerText]="item.isSelectObjectList?$any(option).name:option"
                  ></mat-option>
                  <mat-option
                    *ngSwitchDefault
                    [value]="option"
                    [innerText]="item.optionTranslationTag + option.toString() | translate"
                  ></mat-option>
                </ng-container>
              </ng-container>
            </mat-select>
          </mat-form-field>
          <mat-slide-toggle
            *ngIf="item.isSwitch"
            class="normal-field dps-toggle"
            color="primary"
            [formControlName]="item.model"
            (ngModelChange)="item.onChange($event)"
          >
          </mat-slide-toggle>
        </td>
      </tr>
    </ng-container>
  </table>
  <div class="button-div right">
    <button
      mat-raised-button
      color="primary"
      (click)="optimize()"
      [innerText]="'AUTO.CALC'| translate"
    ></button>
  </div>
  <div>
    <br />
    <mat-divider></mat-divider>
    <br />
    <span class="tip" [innerText]="'AUTO.TIPS'| translate"></span>
  </div>
</div>
